<template>
    <div>
        <div class="blogDetail_box" >
            <el-page-header @back="goBack" content="主页">
            </el-page-header>
            <h2>{{articleInfo.article.title}}</h2>
                  <div class="card_detail">
                      <div class="rol">
                        <i class="el-icon-time"></i>
                        <span>发表于</span>
                        <span>{{articleInfo.article.created}}</span>
                      </div>
                      <div class="rol" style="border-right:1.2px solid #ccc;">
                        <i class="el-icon-view"></i>
                        <span>阅读量</span>
                        <span>{{articleInfo.statistic.hits}}</span>
                      </div>
                      <div class="rol">
                        <i class="el-icon-chat-dot-round"></i>
                        <span>评论数</span>
                        <span>{{articleInfo.statistic.commentsNum}}</span>
                      </div>
                  </div>

                <!-- 判断当前登陆是否为该文章的发表人，是才显示编辑接口 -->
                <span v-if="$store.state.user.userInfo !== null">
                  <el-link icon="el-icon-edit" v-show="$store.state.user.userInfo.id === articleInfo.article.userId">
                    <router-link :to="{name: 'BlogEdit',params:{blogId:articleInfo.article.id}}">编辑</router-link>
                  </el-link>
                </span>
                <span v-else></span>

                <el-divider></el-divider>
                <!-- github-markdown样式渲染 -->
                <!-- <div class="markdown-body" v-html="articleInfo.content"></div> -->
                <mavon-editor
                  class="md"
                  :value = "articleInfo.article.content"
                  :subfield = "false"
                  :defaultOpen = "'preview'"
                  :toolbarsFlag = "false"
                  :editable = "false"
                  :scrollStyle = "true"
                  :ishljs = "true"
                  :boxShadow="false">
                </mavon-editor>

                <!-- 属性解释 -->
                <!-- :value="detailContent.content"：引入要转换的内容
                :subfield = "false"：开启单栏模式
                :defaultOpen = "'preview'"：默认展示预览区域
                :toolbarsFlag = "false"：关闭工具栏
                :editable="false"：不允许编辑
                scrollStyle="true"：开启滚动条样式(暂时仅支持chrome)
                :ishljs = "true"：开启代码高亮 -->

                <div class="article_bottom">
                  <!-- 上一篇,下一篇区域 -->
                  <div class="pre_next">
                    <span>
                      <el-link >
                        上一篇：尚未实现
                      </el-link>
                    </span>

                    <span>
                      <el-link >
                        下一篇
                      </el-link>
                    </span>
                  </div>

                  <div class="good_show">
                    <el-button type="warning" icon="el-icon-thumb" @click="hitLike(articleInfo.article.id)">
                      <span v-if="!isLike">点赞  {{articleInfo.statistic.likes}}</span>
                      <span v-else>已赞  {{articleInfo.statistic.likes}}</span>
                    </el-button>
                    <el-button type="danger" @click="toComplainDialog()">文章举报</el-button>
                    <!-- <div class="button"><el-button type="primary" @click="show = !show">打赏</el-button></div> -->
                    <!-- <div :class="show? 'show':'none'">
                      <transition name="el-fade-in-linear">
                        <div v-show="show" class="transition-box">
                          <div class="good_left">
                            <span>评分</span>
                            <el-rate
                                v-model="rateValue">
                            </el-rate>
                            <div class="point">
                              <el-button type="warning" icon="el-icon-thumb">点赞</el-button>
                            </div>
                          </div>
                        </div>
                      </transition>
                      <transition name="el-fade-in">
                        <div v-show="show" class="transition-box">
                          深居简出<br>
                          赏你两巴掌！
                        </div>
                      </transition>
                    </div> -->
                  </div>

                  <!-- 举报对话框 -->
                  <el-dialog
                    title="文章举报"
                    :visible.sync="complaintDialogVisible"
                    width="40%"
                    @close="resetComplaintDialog()"
                    >
                    <el-form
                    label-width="80px"
                    label-position="top"
                    class="complain_form"
                    :model="complaintForm" :rules="complaintFormRules"
                    ref="complaintFormRef">
                      <el-form-item label="举报博主" prop="toName">
                        <el-row>
                          <el-col :span=10><el-input disabled v-model="complaintForm.toName"></el-input></el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="选择你举报的内容（必选）" prop="radio">
                        <el-radio-group v-model="complaintForm.radio">
                          <el-radio-button label="内容涉黄"></el-radio-button>
                          <el-radio-button label="政治相关"></el-radio-button>
                          <el-radio-button label="内容抄袭"></el-radio-button>
                          <el-radio-button label="涉嫌广告"></el-radio-button>
                          <el-radio-button label="内容侵权"></el-radio-button>
                          <el-radio-button label="侮辱谩骂"></el-radio-button>
                          <el-radio-button label="样式问题"></el-radio-button>
                          <el-radio-button label="其他"></el-radio-button>
                        </el-radio-group>
                      </el-form-item>

                      <el-form-item label="补充说明" prop="content">
                        <el-input
                        type="textarea" rows="4"
                        maxlength="100"
                        show-word-limit
                        v-model="complaintForm.content">

                        </el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="complaintDialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="complaintArticle()">确 定</el-button>
                    </span>
                  </el-dialog>

                  <div class="end_tip">
                    <div class="copyright">
                      <ul>
                        <li><strong>本文作者：</strong>{{articleInfo.author}}</li>
                        <li><strong>本文链接：</strong>https://www.yidiandian.top/blog/{{articleInfo.statistic.id}}</li>
                        <li><strong>版权声明：</strong>本博客所有文章除特别声明外，均采用  BY-NC-SA 许可协议。转载请注明出处！</li>
                      </ul>
                    </div>
                    <p>-------------本文结束<i class="el-icon-star-on"></i>感谢您的阅读-------------</p>
                    <el-tag effect="plain" type="info"><i class="el-icon-collection-tag"></i> {{articleInfo.article.categories}}</el-tag>
                  </div>

                </div>
        </div>

        <div class="comment_box">
          <div class="comment_tip">
              <span><i class="el-icon-warning-outline"></i>留言说明： </span>
                <p>务必遵守网络评论文明，如果发现恶语攻击，可是会被封号的哦~</p>
                <el-divider></el-divider>
          </div>

          <div class="comment_form">
            <el-form
            :model="commentForm" :rules="commentRules" ref="commentRef"
            label-width="50px">
                <el-row :gutter="10">
                    <el-col :span=12>
                        <el-form-item label="昵称">
                            <el-input v-if="$store.state.user.userInfo !== null" disabled v-model="$store.state.user.userInfo.username"></el-input>
                            <el-input v-else></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=12>
                        <el-form-item label="邮箱">
                            <el-input v-if="$store.state.user.userInfo !== null" disabled v-model="$store.state.user.userInfo.email"></el-input>
                            <el-input v-else></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="内容" prop="content">
                    <el-input type="textarea" rows="8"
                    v-model="commentForm.content"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="CommentSubmit">提交</el-button>
                    <el-button @click="CommentReset">重置</el-button>
                </el-form-item>
            </el-form>
          </div>

          <div class="comment_list">
            <div>
              <p>共 {{articleInfo.statistic.commentsNum}} 条评论</p>
            </div>
            <div>
              <ul>
                <li v-for="list in commentList" :key="list.comment.id">
                  <div class="lileft">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                  </div>
                  <div class="liright">
                    <div class="info">
                      <span class="infoUser">{{list.comment.author}}</span>
                      <span class="infoTime">{{list.comment.created}}</span>
                    </div>
                    <p>{{list.comment.content}}</p>
                  </div>
                </li>

                <div class="comment_end_tip">
                  <p>没有更多了~</p>
                </div>

              </ul>
            </div>
          </div>

        </div>
    </div>
</template>

<script>
// 引入github-markdown样式渲染md格式的文档
import 'github-markdown-css'

export default {
  data () {
    return {
      // 文章id
      articleId: '',
      // 文章详情信息
      articleInfo: {},
      // 评论列表
      commentList: [],
      // 品论查询参数
      queryComment: {
        cur: '',
        size: 1,
        articleId: ''
      },
      CommentTotal: '',
      // 是否展示
      show: false,
      commentForm: {
        content: '' // 评论内容
      },
      commentRules: {
        content: [
          { required: true, message: '小主，看都看了，评论一下呗~', trigger: 'blur' }
        ]
      },
      // 点赞
      isLike: false,
      // 文章评分
      rateValue: '',
      // 投诉表单
      complaintForm: {
        toName: '', // 被投诉人
        radio: '', // 投诉单选内容
        content: '' // 投诉说明
      },
      complaintFormRules: {
        toName: [
          { required: true }
        ],
        radio: [
          { required: true, message: '举报内容必选' }
        ],
        content: [
          { required: true, message: '补充说明不能为空！', trigger: 'blur' }
        ]
      },
      // 举报框
      complaintDialogVisible: false
    }
  },
  methods: {
    // 根据 id 获取文章
    async getArticle (articleId) {
      console.log('获取文章' + articleId)

      // 获取文章详细
      const { data: res } = await this.$http.get(`/article/get/${articleId}`)
      console.log('获取文章详情', res)
      if (res.code !== 200) return this.$message.error('获取文章详情失败！')
      this.articleInfo = res.data

      // 设置标识，为了返回能够回到之前的列表页
      sessionStorage.setItem('pageDetail', true)

      // // 使用一个插件markdown-it，用于解析md文档
      // var MardownIt = require('markdown-it')
      // var md = new MardownIt()
      // this.articleInfo.content = md.render(this.articleInfo.content)
    },
    // 获取文章评论
    async getArtcleComment (articleId) {
      this.queryComment.articleId = articleId
      const { data: res } = await this.$http.get('/comment/commentPage',
        { params: this.queryComment })
      console.log('获取文章评论', res)
      if (res.code !== 200) return this.$message.error('评论获取失败！')
      this.commentList = res.data.list
      this.CommentTotal = res.data.total
    },
    // 获得上一篇下一篇的id和标题名
    getPreNext () {

    },
    // 返回事件
    goBack () {
      this.$router.push('/blogs')
    },
    // 提交评论
    async CommentSubmit () {
      const { data: res } = await this.$http.post('/comment/insertComment', {
        articleId: this.articleId,
        content: this.commentForm.content
      })
      console.log('提交评论', res)
      if (res.code !== 200) return this.$message.error('评论失败！')
      this.getArtcleComment(this.articleId)
      this.$refs.commentRef.resetFields()
      return this.$message.success('评论成功！')
    },
    // 重置评论
    CommentReset () {
      this.$refs.commentRef.resetFields()
    },
    // 点赞
    async hitLike (articleId) {
      this.isLike = !this.isLike
      if (this.isLike) {
        const { data: res } = await this.$http.get(`/article/likes/${articleId}?flag=true`)
        console.log('点赞', res)
        if (res.code !== 200) { } else { this.articleInfo.statistic.likes += 1 }
      } else {
        const { data: res } = await this.$http.get(`/article/likes/${articleId}?flag=false`)
        console.log('取消点赞', res)
        if (res.code !== 200) { } else { this.articleInfo.statistic.likes -= 1 }
      }
    },
    // 打开举报 Dialog
    toComplainDialog () {
      this.complaintForm.toName = this.articleInfo.author
      this.complaintDialogVisible = true
    },
    // 重置举报 Dialog 中的 complaintForm 表单
    resetComplaintDialog () {
      this.$refs.complaintFormRef.resetFields()
    },
    // 举报博文
    complaintArticle () {
      // 表单预校验
      this.$refs.complaintFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('/complaint/insert', {
            toName: this.complaintForm.toName,
            content: this.complaintForm.radio + '：' + this.complaintForm.content
          })
          console.log('举报文章', res)
          if (res.code !== 200) return
          this.$message.success('已收到你的投诉，管理员会尽快处理！')
          this.complaintDialogVisible = false
        } else {
          // console.log('投诉内容不能为空')
          return this.$message.warning('小主，投诉内容不能为空哦！')
        }
      })
    }
  },
  created () {
    // 可以获取路由路径中的路径参数 blogId
    const blogId = this.$route.params.blogId
    this.articleId = blogId
    this.getArticle(blogId)
    this.getArtcleComment(blogId)
  }
}
</script>

<style lang="less" scoped>
.el-button{
  outline: none;
}
.blogDetail_box{
  min-height: 540px;
  padding: 2% 5%;
  border: 1px solid #eee;
  transition: all 0.5s;
  .el-page-header{
    margin-bottom: 3%;
  }
  .md{
    z-index: 0;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: none !important;

  }
  .card_detail{
    height: 40px;
    width: 100%;
    font-size: 12px;
    color: #999;
    padding: 10px 0;
    .rol{
      float: left;
      margin-right: 8px;
      i{
        margin-right: 4px;
      }
      span{
          margin-right: 5px;
      }
    }
  }
  .article_bottom{
    .pre_next{
      margin-top: 2%;
      padding: 0 1%;
      display: flex;
      justify-content: space-between;
    }
    .good_show{
      position: relative;
      text-align: center;
      margin-top: 5%;
      .button{
        .el-button{
          outline: none;
        }
      }
      .show{
        display: flex;
        margin-top: 3%;
        justify-content: center;
      }
      .none{
        display: none;
        height: 0;
      }
      .transition-box {
        position: relative;
        width: 50%;
        height: 200px;
        border-radius: 4px;
        background: rgba(160, 233, 100, 0.5);
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 2%;
        font-size: 14px;
        .good_right{
          width: 200px;
          // border: 1px solid red;
        }
        .good_left{
          width: 200px;
          // border: 1px solid red;
          span{
            color: sandybrown;
          }
          .point{
            margin-top: 20px;
          }
        }
      }
    }
    .end_tip{
      .copyright{
        ul{
          margin: 2em 0 0;
          padding: .5em 1em;
          border-left: 3px solid #ff1700;
          background-color: #f9f9f9;
          list-style: none;
          line-height: 2;
        }
      }
      p{
          text-align: center;
          color: #ccc;
          font-size: 16px;
          padding: 20px 0;
      }
    }
  }
}

.blogDetail_box:hover{
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.comment_box{
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  margin-top: 2%;
  padding: 3% 2%;
  .comment_tip{
    span{
        i{
            margin-right: 3px;
            color: red;
            font-weight: bold;
        }
    }
    p{
        margin-top: 1%;
    }
    .el-divider{
        height: 0.5px;
    }
  }
  .comment_list{
    margin-top: 3%;
    margin-bottom: 4%;
    position: relative;
    ul{
      margin-top: 3%;
      list-style: none;
      padding: 0 !important;
      li{
        min-height: 110px;
        padding: 10px 0;
        margin: 1% 0;
        border-bottom: 1px solid #eee;
        .lileft{
          float: left;
          margin: 0 2%;
        }
        .liright{
          p{
            color: #303133;
          }
          .info{
            margin-bottom: 1%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .infoUser{
              color: #1abc9c;
            }
            .infoTime{
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
      .comment_end_tip{
        p{
          text-align: center;
          color: rgb(34, 33, 33);
        }
      }
    }
  }
}

</style>

<style lang="less">
.v-show-content{
  background-color: rgba(255, 255, 255, 0.1) !important;
}
// 修改了投诉表单的label
.complain_form{
  .el-form-item{
    .el-form-item__label{
      line-height: 12px !important;
    }
  }
}
</style>
